<script lang="ts" setup>
	import { ref } from "vue"
	import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
	import { UserApi } from '@/api/user';
	import { message } from 'ant-design-vue';
	import { useUserStore } from '@/stores/user';
	import { usePopupStore } from '@/stores/popup'
	import dayjs from 'dayjs';
	import 'dayjs/locale/zh-cn';
	dayjs.locale('zh-cn');
	const userStore = useUserStore()
	const usePopup = usePopupStore()
	let userInfo = ref({
		...userStore.userInfo
	})
	let exit = (type : string) => {
		usePopup.setPopup(type)
		userInfo.value = { ...userStore.userInfo }
	}
	const gender = [
		{
			value: '男',
			label: '男',
		},
		{
			value: '女',
			label: '女',
		},
		{
			value: '保密',
			label: '保密',
		}
	]
	const submit = () => {
		if (userInfo.value.username.length == 0) {
			message.error('用户名不能为空');
			return false
		}
		if (userInfo.value.nickname.length == 0) {
			message.error('昵称不能为空');
			return false
		}
		UserApi.updateUser(userInfo.value).then((res : any) => {
			if (res.code == 1) {
				message.success(res.message);
				userStore.setUser(res.data)
				exit('')
			} else if (res.code == 0) {
				message.error(res.message);
			}
		})
	}
</script>

<template>
	<a-modal :open="true" :footer="null" @cancel="exit('')" centered width="650px" :getContainer="false">
		<div class="content">
			<div class="title">
				<div class="line"></div>个人信息
			</div>
			<div class="info-box">
				<!-- <div class="item">
					<div class="lebel">
						<span>*</span>用户名：
					</div>
					<div class="text">
						<input type="text" v-model="userInfo.username" placeholder="请输入用户名" class="input" />
					</div>
				</div> -->
				<div class="item">
					<div class="lebel">
						<span>*</span>昵称：
					</div>
					<div class="text">
						<input type="text" v-model="userInfo.nickname" placeholder="请输入昵称" class="input" />
					</div>
				</div>
				<div class="item">
					<div class="lebel">
						性别：
					</div>
					<div class="text">
						<a-select v-model:value="userInfo.gender" size="large" :options="gender" placeholder="请选择性别"
							class="select"></a-select>
					</div>
				</div>
				<div class="item">
					<div class="lebel">
						联系方式：
					</div>
					<div class="text">
						<input type="text" v-model="userInfo.mobile" placeholder="请输入联系方式" class="input" />
					</div>
				</div>
				
				<div class="item">
					<div class="lebel">
						出生日期：
					</div>
					<div class="text">
						<a-date-picker :locale="locale" v-model:value="userInfo.birthday" value-format="YYYY/MM/DD"
							format="YYYY/MM/DD" size="large" placeholder="请选择出生日期" class="picker" />
					</div>
				</div>
				<div class="item signature">
					<div class="lebel">
						个性签名：
					</div>
					<div class="text">
						<a-textarea class="textarea" v-model:value="userInfo.signature" placeholder="说点什么吧..."
							:auto-size="{ minRows: 5, maxRows: 5 }" />
					</div>
				</div>
			</div>
			<div class="btn-box">
				<a-button type="primary" class="btn" @click="submit">
					保存
				</a-button>
				<a-button type="default" class="btn" @click="exit('')">
					取消
				</a-button>
			</div>
		</div>
	</a-modal>
</template>

<style lang="scss" scoped>
	.ant-modal-content {
		padding: 0;
	}

	.content {
		padding: 0 20px;

		.title {
			font-size: 18px;
			padding-bottom: 15px;
			border-bottom: 1px solid #ccc;
			display: flex;
			align-items: center;
			font-weight: bold;
			.line {
				border-radius: 4px;
				width: 4px;
				height: 20px;
				background-color: #1677ff;
				margin-right: 8px;
			}
		}

		.info-box {
			margin-top: 20px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				margin-top: 20px;
				display: flex;
				align-items: center;

				.lebel {
					margin-right: 10px;
					width: 70px;
					text-align: right;

					span {
						color: red;
					}
				}

				.text {
					.textarea {
						margin-top: 10px;
					}

					.picker {
						width: 189px;
						font-size: 14px;


					}

					.picker ::v-deep .ant-picker-input input {
						font-size: 14px;
					}

					.select {
						width: 189px;
						font-size: 14px;
					}

					.select ::v-deep .ant-select-selector {
						font-size: 14px;
					}


					.input {
						height: 40px;
						border: solid 1px #d9d9d9;
						border-radius: 6px;
						font-size: 14px;
					}

					.input:focus {
						box-shadow: 0 0 0 2px rgb(5, 145, 255, 10%);
						border-color: #4096ff;
					}

					.input:hover {
						border-color: #4096ff;
					}

					::placeholder {
						color: #bfbfbf;
						font-size: 14px;
					}
				}
			}

			.signature {
				margin-top: 30px;
				display: block;
				width: 100%;
			}
		}

		.btn-box {
			margin-top: 30px;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				margin: 0 20px;
			}
		}

	}
</style>